<template>
  <div class="info-frame" @click="infoFrameClick">
    <div class="info-frame-head"
      :style="getBgc">{{head}}</div>
    <div class="info-frame-content"><span>{{content}}</span></div>
  </div>
</template>

<script>
  export default {
    name: "InfoFrame",
    props: {
      head: {
        type: String,
        default: ''
      },
      content: {
        type: Number,
        default: 0
      },
      titleBgcColor: {
        type: String,
        default: 'white'
      },
      link: {
        type: String,
        default: '/admin/introduce'
      }
    },
    computed: {
      getBgc() {
        return {'background-color': this.titleBgcColor}
      }
    },
    methods: {
      infoFrameClick() {
        this.$router.push(this.link)
      }
    }
  }
</script>

<style scoped>
  .info-frame {
    width: 300px;
    height: 140px;
    border-radius: 6px;
    border: 1px solid #cdcdcd;

    text-align: center;
  }
  .info-frame:hover {
    cursor: pointer;
  }
  .info-frame-head {
    height: 40%;
    line-height: 56px;
    color: white;
    font-size: 30px;

    border-bottom: 1px solid #cdcdcd;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
  }
  .info-frame-content {
    height: 60%;
    line-height: 84px;

    font-weight: bold;
    font-size: 20px;

    border-bottom: 1px solid #cdcdcd;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    background-color: white;
  }
</style>